<template>
  <div style="height:100%;width:100%;">
    <div class="lineCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "businessIncome",
  data(){
    return{
      number:10,
     incomeMainData:{
       lastYearLjIncomeList:{},
       thisYearBudgetList:{},
       gapOfBudgetLjList:{},
       thisYearLjIncomeList:{},
     },
     max:'',
     lastYearLjMin:'',
     thisYearBudgetMin:'',
     gapOfBudgetMin:'',
     thisYearLjMin:'',

    }
  },
  props: {
    incomeMain: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    incomeMain(val){
      this.incomeMainData=val
      let obj = {
        xAxis: [],
        yAxis: [],
      };
      let obj1 = {
        xAxis: [],
        yAxis: [],
      };
      let obj2 = {
        xAxis: [],
        yAxis: [],
      };
      let obj3 = {
        xAxis: [],
        yAxis: [],
      };
    this.incomeMainData.lastYearLjIncomeList.map((item,index) => {
         obj.xAxis.push(item.month);
         obj.yAxis.push(item.lastYearLjIncome);
         this.lastYearLjMin = Math.min.apply(null, obj.yAxis);
     });
     this.incomeMainData.thisYearBudgetList.map((item,index) => {
         obj1.xAxis.push(item.month);
         obj1.yAxis.push(item.thisYearBudget);
         this.thisYearBudgetMin = Math.min.apply(null, obj1.yAxis);
     });
     this.incomeMainData.gapOfBudgetLjList.map((item,index) => {
         obj2.xAxis.push(item.month);
         obj2.yAxis.push(item.gapOfBudgetLj);
         this.max = Math.max.apply(null, obj2.yAxis);
     });
     this.incomeMainData.thisYearLjIncomeList.map((item,index) => {
         obj3.xAxis.push(item.month);
         obj3.yAxis.push(item.thisYearLjIncome);
         this.thisYearLjMin = Math.min.apply(null, obj3.yAxis);
     });
     var min = [this.lastYearLjMin, this.thisYearBudgetMin, this.thisYearLjMin].sort(function(a,b){return a-b})[0];
     this.incomeMainData.lastYearLjIncomeList= obj;
     this.incomeMainData.thisYearBudgetList= obj1;
     this.incomeMainData.gapOfBudgetLjList= obj2;
     this.incomeMainData.thisYearLjIncomeList= obj3;
     this.getPie(this.incomeMainData,min,this.max);
    }
  },
  methods: {
    getPie(val,min,max) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".lineCanvas"));
      let option = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            }
          },
        legend:[
          {
             data: ['月累计预算盈缺(万元)', '2019年完成(亿元)'],
             bottom: '20px',
            },
            {
               data: ['2020年完成(亿元)', '2020年预算(亿元)'],
                y:'bottom',
              },
         ],
        grid: {
          left: "20px",
          right: "20px",
          bottom:'90px',
          top:'10px',

         },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          // data: val.lastYearLjIncomeList.xAxis,
		     data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
          axisLabel: {
            interval:0,
            // rotate:40 ,
            },
          },
        yAxis: [
              {
                  type: 'value',
                  min: 0,
                  splitLine:{show: false},  //去除网格线
                  max: max*3,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value}万元',
                      show:false
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },
              {
                  type: 'value',
                  // min: min*2,
                  // max: min*2,
                  // // interval: 50,
                  splitLine:{show: false},  //去除网格线
                  axisLabel: {
                      formatter: '{value}亿元',
                      show:false
                  },
                  splitArea:{
                      show:true,
                      areaStyle:{
                          color:'#fff'
                      },
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              }

            ],

        series: [
         {
          type: "bar",
           name: '月累计预算盈缺(万元)',
          data: val.gapOfBudgetLjList.yAxis,
           barWidth :20,
           itemStyle:{
                normal:{
                  color:'rgb(85, 133, 191)',
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                           color:'rgb(85, 133, 191)',
                         }
                     }
                }
            },
        },
          {
            type: "line",
             name: '2019年完成(亿元)',
            smooth: true,
             yAxisIndex: 1,
            data: val.lastYearLjIncomeList.yAxis,
            lineStyle: {
                   normal: {
                       color: "#00b050", // 线条颜色
                       width: 0.8
                   }
            },
            itemStyle : {
              normal: {
                 color: '#00b050',
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#00b050'
                   }
                  },
               },
            },
          },
         {
          type: "line",
          smooth: true,
           name: '2020年完成(亿元)',
            yAxisIndex: 1,
          data: val.thisYearLjIncomeList.yAxis,
          lineStyle: {
                 normal: {
                     color: "#ff0000", // 线条颜色
                     width: 0.8
                 }
          },
          itemStyle : {
            normal: {
               color: '#ff0000',
              label : {
                show: true,
                position: 'top',
                textStyle: {
                   color: '#ff0000'
                 }
                },
             },
          },
        },
        {
          type: "line",
           name: '2020年预算(亿元)',
           yAxisIndex: 1,
             smooth: true,
          data: val.thisYearBudgetList.yAxis,
           itemStyle:{
                normal:{
                    color: "#a6a6a6", // 线条颜色
                    lineStyle:{
                        width: 0.8,
                        type:'dotted'  ,//'dotted'虚线 'solid'实线
                         color: "#a6a6a6", // 线条颜色
                    },
                    label : {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                           color: '#a6a6a6'
                         }
                },
                }
          },
        },
      ],
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
